<template>
  <a-dropdown :trigger="trigger" v-bind="$attrs">
    <span><slot></slot></span>
    <template #overlay>
      <a-menu :selectedKeys="selectedKeys">
        <template v-for="item in dropMenuList" :key="`${item.event}`">
          <a-menu-item
            v-bind="getAttr(item.event)"
            :disabled="item.disabled"
            @click="handleClickMenu(item)"
          >
            <span class="m-1">{{ item.text }}</span>
          </a-menu-item>
          <a-menu-divider v-if="item.divider" :key="`d-${item.event}`"></a-menu-divider>
        </template>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
  import { computed, PropType } from 'vue'
  import type { DropMenu } from './typing'
  import { Dropdown, Menu } from 'ant-design-vue'
  import { omit } from 'lodash-es'
  import { isFunction } from '@/utils/is'

  const ADropdown = Dropdown
  const AMenu = Menu
  const AMenuItem = Menu.Item;
  const AMenuDivider = Menu.Divider;


  const props = defineProps({
    trigger: {
      type: Array as PropType<('contextmenu' | 'click' | 'hover')[]>,
      default: () => {
        return ['contextmenu']
      }
    },
    dropMenuList: {
      type: Array as PropType<(DropMenu & Recordable<any>)[]>,
      default: () => []
    },
    selectedKeys: {
      type: Array as PropType<string[]>,
      default: () => []
    }
  })

  const emit = defineEmits(['menuEvent'])

  function handleClickMenu(item: DropMenu) {
    const { event } = item
    const menu = props.dropMenuList.find(item => `${item.event}` === `${event}`)
    emit('menuEvent', menu)
    item.onClick?.()
  }
  
  const getAttr = (key: string | number) => ({ key });
</script>